<template>
  <Dialog
    width="750px"
    :title="title"
    v-model="dialogTableVisible"
    @confirm="confirm"
    @cancel="cancel"
    clickBtn="show"
  >
    <template #content>
      <div class="chart" ref="echart"></div>
    </template>
  </Dialog>
</template>

<script>
import Dialog from '@/components/Dialog/index.vue'
import FormMixin from '@/mixins/FormMixin.js'

export default {
  name: 'EchartLine',
  props: [''],
  mixins: [FormMixin],
  data() {
    return {
      chart: '',
      option: {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '8%',
          right: '4%',
          top: '6%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          name: '监测时间',
          type: 'category',
          nameLocation: 'center',
          nameGap: 25, // 坐标轴名称与轴线之间的距离
          data: []
          // data: ['Mon', 'Tue', 'Wed', 'Tes', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          name: '',
          type: 'value',
          nameLocation: 'center',
          nameGap: 25,
          // max: '15', // 设置y轴最大值
          axisLine: {
            show: true
          }
        },
        series: [
          {
            symbol: 'none',
            name: '监测值',
            type: 'line',
            // data: [1, 2, 2, 4, 1, 3, 4],
            data: [],
            markLine: {
              symbol: 'none', //去掉警戒线最后面的箭头
              label: {
                position: 'middle', //警示值放的位置，start,middle,end
                formatter: '{b}',
                fontSize: 11
              },
              data: [
                {
                  name: '报警值',
                  silent: false, //鼠标悬停事件  true没有，false有
                  lineStyle: {
                    //警戒线的样式
                    type: 'solid',
                    color: '#ff0000'
                  },
                  yAxis: '' //警戒线在y轴的坐标
                },
                {
                  name: '预警值',
                  silent: false,
                  lineStyle: {
                    type: 'solid',
                    color: '#ffba0c'
                  },
                  yAxis: ''
                }
              ]
            }
          }
        ]
      }
    }
  },

  components: { Dialog },

  created() {},

  mounted() {},

  methods: {
    init(row, chartObject) {
      this.dialogTableVisible = true
      this.$nextTick(() => {
        this.chart = this.$echarts.init(this.$refs.echart) // 初始化echarts
        window.addEventListener('resize', () => {
          this.chart.resize()
        })
        this.option.xAxis.data = row[0]
        this.option.series[0].data = row[1]
        this.option.yAxis.name = chartObject.unit
          ? `监测值（单位：${chartObject.unit}）`
          : '监测值（单位：无）'
        this.option.series[0].markLine.data[0].yAxis = chartObject.alarmValue
          ? chartObject.alarmValue
          : ''
        this.option.series[0].markLine.data[1].yAxis = chartObject.warnValue
          ? chartObject.warnValue
          : ''
        this.chart.setOption(this.option)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/index.scss';
.chart {
  width: 600px;
  height: 580px;
}
</style>
